<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="ezdrag.css" rel="stylesheet"/>
    <script src="jquery-1.11.2.js"></script>
    <script src="ezDrag.jquery.js"></script>
    <script>
          $(function () {
              Ez.dragInit(function(from,to){
				  //return false; //不允许操作
				return true ;//允许操作
			  });
			  /*
              Ez.dragInit({
			  dragcallback:function(from,to){
				   //return false; //不允许操作
				  return true ;//允许操作
			  },
			   eventScopeSelector:"body",//动态事件监测区域
				behavior:"insert",//拖动行为  insert | replace
				dragScopeSelector:".dragbox-area"//拖动课作用区域
			  });
			  */
          })
    </script>
    <style>
        .role li { width: 100px; height: 100px; background: #109899;}
        .flow-nodes li {width: 100px; height: 100px; background: #109899;}
        ul{ margin: 0px; padding: 0px;}
        ul li{ list-style:none; margin: 1px; text-align: center; line-height: 100px; cursor: pointer;}
    </style>
</head>
<body>
<div style="height: 200px; width: 50000px;top: 10000px; background-color: red; right:0px;z-index: 200;">22</div>
<div style="position: relative;width: 504px; height: 1800px; margin-left: 1400px;" class="dragbox-area">
    <div style="width: 200px; float: left; height: 300px; border:solid 1px #cdcdcd;">
	   <!--如果让其可以拖动请设置属性data-dragbox-to-->
        <ul class="role" data-dragbox-to="t"><li data-dragbox-from="t" >角色1</li><li data-dragbox-from="t">角色2</li></ul>
    </div>
    <div style="width: 300px; float: left; height: 500px;border:solid 1px #cdcdcd;">
        <ul class="flow-nodes" >
		<!--如果让其接受拖块请设置属性data-dragbox-to   设置的值相同表示属于同作用域-->
		<li data-dragbox-to="t"></li>
		<li data-dragbox-to="t"></li>
		</ul>
    </div>
</div>

</body>
</html>